﻿
@{
    ViewBag.Title = "ForgotPwd";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head {
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
    <link rel="stylesheet" href="~/Content/css/animate.css">
    <link rel="stylesheet" href="~/Content/css/signstyle.css">

    <!-- Modernizr JS -->
    <script src="~/Content/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="~/Content/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8" charset="utf-8"></script>
}

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <!-- Start Forgot Password div -->
            <div class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <h2>Forgot Password</h2>
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Username" maxlength="10" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="email" class="sr-only">Email</label>
                    <input type="email" maxlength="50" class="form-control" id="email" placeholder="Email" autocomplete="off">
                </div>
                <div class="form-group">
                    <p><a href="index.html">Sign In</a> or <a href="sign-up.html">Sign Up</a></p>
                </div>
                <div id="msg" class="form-group">
                    <div class="alert alert-success" role="alert">Your email has been sent.</div>
                </div>
                <div class="form-group">
                    <input id="btnSend" type="submit" value="Send Email" class="btn btn-primary">
                </div>
            </div>
            <!-- END Forgot Password div -->
        </div>
    </div>
</div>
<!-- Bootstrap -->
<script src="~/Content/js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="~/Content/js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="~/Content/js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="~/Content/js/main.js"></script>

<script>
    var verifyName = false;
    var verifyEmail = false;
    $(function () {
        $("#msg").hide();
        $("#btnSend").attr('disabled', 'true');
        //当用户名失去焦点时验证数据库是否已存在此账号
        $("#username").blur(function () {
            var userName = $("#username").val();
            if (userName == "") {
                $("#msg").show().find('div').html("Please enter login account");
                $("#username").focus();
                return;
            }
            $.ajax({
                url: "/User/VerifyName", dataType: "json",
                type: "post", data: { userName: userName },
                success: function (res) {
                    if (res.Status == "OK") {
                        $("#msg").show().find('div').html("Username does not exist");
                        $("#username").focus();
                    } else {
                        verifyName = true;
                        $("#msg").hide();
                        if (verifyEmail) {
                            $("#btnSend").removeAttr("disabled");
                        }
                    }
                }, error: function () {
                    $("#msg").show().find('div').html("Network error");
                }
            });
        });
        //检查邮箱
        $("#email").blur(function () {
            var email = $("#email").val();
            if (email == "") {
                $("#msg").show().find('div').html("Please enter email address");
                $("#email").focus();
                return;
            }
            var reg = /^\w+([-+.]\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (!reg.test(email)) {
                $("#msg").show().find('div').html("Please enter the correct email address");
                $("#email").focus();
                return;
            }
            if (verifyName) {
                $("#btnSend").removeAttr("disabled");
            }
            $("#msg").hide();
            verifyEmail = true;
        });
    });
    var validCode = true;
    $("#btnSend").click(function () {
        var userName = $("#username").val();
        if (userName == "") {
            $("#msg").show().find('div').html("Please enter login account");
            $("#username").focus();
            return;
        }
        var email = $("#email").val();
        if (email == "") {
            $("#msg").show().find('div').html("Please enter email address");
            $("#email").focus();
            return;
        }
        var time = 60;
        var code = $(this);
        if (validCode) {
            sendEmail(email, userName);
            validCode = false;
            code.attr('disabled', 'true').attr("color", "#818080");
            var t = setInterval(function () {
                time--;
                code.val(time + "s");
                if (time == 0) {
                    clearInterval(t);
                    code.val("Reacquire");
                    validCode = true;
                    code.removeAttr("disabled").removeAttr('color');
                }
            }, 1000);
        }
    });
    //发送邮箱
    function sendEmail(email, userName) {
        $.ajax({
            url: "/User/ForgotPwd", dataType: "json",
            type: "post", data: { userName: userName, email: email },
            success: function (res) {
                if (res.Status == "OK") {
                    $("#msg").show().find('div').html("Your email has been sent.");
                } else {
                    $("#msg").show().find('div').html(res.ErrorMsg);
                }
            }, error: function () {
                $("#msg").show().find('div').html("Network error");
            }
        });
    }
</script>